<template>
  <nut-popup position="bottom" v-model:visible="visible" :style="{ padding: '30rpx' }">
    <view class="logistics-popup">
      <view class="popup-title">物流信息</view>
      
      <view class="form-item">
        <view class="label">工厂快递公司</view>
        <nut-select
          v-model="formData.company"
          :options="companyOptions"
          placeholder="请选择快递公司"
        />
      </view>

      <view class="form-item">
        <view class="label">工厂快递单号</view>
        <nut-input
          v-model="formData.trackingNumber"
          placeholder="请输入快递单号"
          type="text"
        />
      </view>

      <view class="form-item">
        <view class="label">工厂附件产品</view>
        <view class="product-card">
          <image src="/static/images/product.png" class="product-image" />
          <view class="product-info">
            <view class="product-name">智能手机保护壳</view>
            <view class="product-model">型号：SP-2023</view>
          </view>
        </view>
      </view>

      <view class="button-group">
        <nut-button type="default" block @click="handleCancel">取消</nut-button>
        <nut-button type="primary" block @click="handleConfirm" :disabled="!isValid">确认</nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits(['update:visible', 'confirm'])

const companyOptions = [
  { text: '顺丰快递', value: 'SF' },
  { text: '中通快递', value: 'ZTO' },
  { text: '圆通快递', value: 'YTO' },
  { text: '韵达快递', value: 'YD' }
]

const formData = ref({
  company: '',
  trackingNumber: ''
})

const isValid = computed(() => {
  return formData.value.company && formData.value.trackingNumber
})

const handleCancel = () => {
  emit('update:visible', false)
}

const handleConfirm = () => {
  if (isValid.value) {
    emit('confirm', formData.value)
    emit('update:visible', false)
  }
}
</script>

<style lang="scss" scoped>
.logistics-popup {
  min-height: 60vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;

  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
  }
}

.product-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 12rpx;

  .product-image {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
  }

  .product-info {
    flex: 1;

    .product-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 8rpx;
    }

    .product-model {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.button-group {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>
